<template>
	<view id="view">

		<view class="uni-margin-wrap">
			<swiper @change="change"
				circular="true"
				class="swiper"
				previous-margin="200rpx"
				next-margin="100rpx"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration">
				<swiper-item v-for="(i,v) in imageSrc "
					:key="v">
					<view id="view1"
						class="swiper-item uni-bg-red">
						<navigator url=""
							hover-class="none">
							<image :src="i.URL"
								@click="login()"
								style="width: 350rpx; border-radius: 20rpx;"> </image> <text
								id="text">{{i.title}}</text><text id="text1"
								style="font-size: 19rpx;">{{i.mage}}</text><text id="text2">{{i.money}}</text>
						</navigator>
					</view>
				</swiper-item>
			</swiper>
			<view id="logo"
				@click="login()">
				<image :src="img1"
					style="width: 80rpx; height: 80rpx; border-radius: 10rpx;"></image>
				<text class="text1">点击进入首页</text>
			</view>
		</view>

	</view>
	<image id="image1"
		:src="beijingSrc"></image>


</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				current: 0,
				beijingSrc: '',
				imageSrc: [{
						URL: '',
						title: '明月光',
						mage: '情感，欢乐，立意，意境/现代',
						money: '￥78'
					},
					{
						URL: '',
						title: '何不归',
						mage: '情感，还原，立意，本格/现代',
						money: '￥98'
					},
					{
						URL: '',
						title: '帕拉丁',
						mage: '惊悚，阵营，立意，本格/现代',
						money: '￥98'
					},
					{
						URL: '',
						title: '青楼贰',
						mage: '情感，还原，立意，其他/古风',
						money: '￥128'
					},
					{
						URL: '',
						title: '大人物',
						mage: '阵营，还原，立意，其他/现代',
						money: '￥48'
					}


				],
			}
		},
		onLoad() {

		},
		mounted() {
			uni.request({
				url: 'http://124.220.177.66:8082/juben/loginImg',
				method: 'GET',
				success: (res) => {
					console.log(res.data.data);
					this.img1 = 'http://124.220.177.66:8082' + res.data.data[2].imageUrl
					this.imageSrc[0].URL = 'http://124.220.177.66:8082' + res.data.data[7].imageUrl
					this.imageSrc[1].URL = 'http://124.220.177.66:8082' + res.data.data[6].imageUrl
					this.imageSrc[2].URL = 'http://124.220.177.66:8082' + res.data.data[8].imageUrl
					this.imageSrc[3].URL = 'http://124.220.177.66:8082' + res.data.data[9].imageUrl
					this.imageSrc[4].URL = 'http://124.220.177.66:8082' + res.data.data[0].imageUrl
					this.beijingSrc = this.imageSrc[0].URL = 'http://124.220.177.66:8082' + res.data.data[7]
						.imageUrl
					console.log(this.img)
				}
			})
		},
		methods: {
				change(e){
					 this.beijingSrc = this.imageSrc[e.detail.current].URL 
					console.log(e)
					
				},
				login(){
					
					uni.getUserProfile({
						
								desc: '获取用户信息',
								success: (res) => {
									// console.log(res);
									console.log(res.userInfo.nickName);
									uni.redirectTo({
										url: '/pages/Login/login?nickName=' + res.userInfo.nickName,
									});
								},
								fail: (err) => {
									console.log("拒绝" + err);
								}
							})
					
				}
				
		}
	}
</script>

<style lang="less">
	#logo {

		margin-top: 200rpx;

		image {
			margin-left: 31%;
			margin-bottom: -25rpx;
		}

		.text1 {
			color: rgb(238, 218, 232);
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}

	#image1 {

		width: 100%;
		height: 100%;

		filter: blur(12px);
	}

	page {
		height: 100%;
	}

	#view {
		height: 100%;
		width: 100%;
		position: fixed;
		top: 5%;
		z-index: 10;
	}

	.uni-margin-wrap {
		border: 1px green solid;
		width: 100%;
		height: 100%;

		position: fixed;
		padding-top: 40%;

		.swiper-item {
			display: block;
			height: 200rpx;
			line-height: 300rpx;
			text-align: center;
		}
	}

	.swiper {

		height: 650rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	#view1 {
		position: relative;
		width: 300rpx;
		height: 500rpx;

	}

	#view2 {
		position: absolute;
		width: 300rpx;
		height: 500rpx;

	}

	#view3 {
		position: absolute;
		width: 300rpx;
		height: 500rpx;
	}

	#view4 {
		position: absolute;
		width: 300rpx;
		height: 500rpx;
	}

	#view5 {
		position: absolute;
		width: 300rpx;
		height: 500rpx;
	}

	#view6 {
		height: 500rpx;
		width: 300rpx;

	}

	image {
		width: 300rpx;
		height: 500rpx;
	}

	#text {
		position: absolute;
		top: 77%;
		left: 40%;
		font-size: 42rpx;
		color: aliceblue;
	}

	#text1 {
		position: absolute;
		top: 87%;
		left: 15%;
		font-size: 18rpx;
		color: aliceblue;
	}

	#text2 {
		color: rgb(238, 238, 172);
		position: absolute;
		top: 97%;
		left: 44%;
		font-size: 36rpx;
	}

	#text3 {
		position: absolute;
		top: 77%;
		left: 14.5%;
		font-size: 42rpx;
	}
</style>
